<template>
  <div class="chat relative">
    <ul class="flex flex-col">
      <li
        v-for="(item, key) in list"
        v-show="item.show"
        :key="key"
        class="px-16"
        :class="[{ topping: item.topping }]"
        @click="selectChat(item)"
        @touchstart="startLongPress"
        @touchend="endLongPress"
        @pointerdown="pointerdown(item)"
        @contextmenu="contextmenu"
      >
        <div class="recive message flex gc-4 align-center">
          <div class="relative avatar flex-s flex">
            <img :src="item.avatar" />
            <div v-if="item.unread" class="unread"></div>
            <div v-if="item.unReadCount" class="unread-count flex flex-s">
              <span>{{ item.unReadCount }}</span>
            </div>
          </div>
          <div class="flex justify-between flex-1">
            <div>
              <div class="text-14 chat-title mb-4">{{ item.title }}</div>
              <div class="text-999 text-12">{{ item.lastMessage }}</div>
            </div>
            <div class="text-right">
              <div class="text-10 text-999">{{ item.time }}</div>
              <img v-if="item.disturb" :src="bellOff" width="14" />
            </div>
          </div>
        </div>
      </li>
    </ul>
    <Contextmenu></Contextmenu>
  </div>
</template>

<script setup lang="ts">
  import bellOff from '@/assets/images/bell-off.png';
  import { computed, ref } from 'vue';

  import { getMessageStore } from '@/store/message/utils';
  import {
    currentMessage,
    messageAction,
    showMessage,
  } from '@/views/components/message/message';
  import { IMessagePreview } from './types';
  import Contextmenu from './contextmenu/Contextmenu.vue';
  import { contextmenuConfig } from './contextmenu/contextmenu';

  const isLongPress = ref(false);
  let pressTimer: any = null;

  const startLongPress = () => {
    pressTimer = setTimeout(() => {
      isLongPress.value = true;
      contextmenuConfig.value.show = true;
    }, 500); // 设置长按时间阈值，单位为毫秒
  };
  const pointerdown = (data: IMessagePreview) => {
    const e = window.event as PointerEvent;
    contextmenuConfig.value.x = e.x;
    contextmenuConfig.value.y = e.y;
    contextmenuConfig.value.menus[0].title = data.unread
      ? '标记为已读'
      : '标记为未读';
    contextmenuConfig.value.data = data;
  };

  const contextmenu = () => {
    const e = window.event as MouseEvent;
    e.preventDefault();
  };
  const endLongPress = () => {
    clearTimeout(pressTimer);
    isLongPress.value = false;
  };
  const selectChat = (item: IMessagePreview) => {
    messageAction.value = {
      emoji: undefined,
      more: undefined,
      plus: undefined,
    };
    showMessage.value = true;
    currentMessage.value = item;
  };
  const list = computed(() => {
    const store = getMessageStore();
    const result = store.list
      .map((e) => {
        if (e.topping) {
          e.sort += 1000;
        }
        return e;
      })
      .sort((a, b) => {
        return b.sort - a.sort;
      });
    return result;
  });
</script>

<style lang="scss" scoped>
  .chat {
    overflow-y: auto;
    li {
      padding: 6px 0;
    }
    .avatar {
      width: 42px;
      height: 42px;
      border-radius: 4px;
      background-color: var(--background-color);
      img {
        border-radius: 4px;
        width: 36px;
        height: 36px;
      }
      .unread {
        background-color: var(--red);
        border-radius: 50%;
        width: 10px;
        height: 10px;
        position: absolute;
        right: -3px;
        top: -3px;
      }
      .unread-count {
        background-color: var(--red);
        border-radius: 50%;
        width: 16px;
        height: 16px;
        position: absolute;
        right: -3px;
        color: white;
        top: -3px;
        span {
          zoom: 0.8;
        }
      }
    }
    .topping {
      background-color: var(--background-color);
    }
    .chat-title {
      color: #000;
    }
  }
</style>
